<template>
<div class="dataList">
  <!-- <div class="scollDiv"> -->
   <div class="cardButton" >
      <div class="panelCard" @click="$router.replace({ path: '/eventList' })">
        <!-- <img  :src="circleUrl" alt=""> -->
        <i class="fa fa-envelope fa-3x" style="color:#86bcd6"></i>
        <div class="title">最新请求数(个)</div>
        <div class="num">{{requestNum}}</div>
      </div>
      <div class="panelCard" @click="$router.replace({ path: '/taskList' })">
        <i class="fa fa-tasks fa-3x" style="color:#e8ac6b"></i>
        <div class="title">当前任务数(个)</div>
        <div class="num">{{taskNum}}</div>
      </div>
      <div class="panelCard" @click="$router.replace({ path: '/rescueManage' })">
        <i class="fa fa-users fa-3x" style="color:#6cc990"></i>
        <div class="title">注册救援队数(人)</div>
        <div class="num">{{rescueNum}}</div>
      </div>
      <div class="panelCard" @click="$router.replace({ path: '/rescueManage' })">
        <i class="fa fa-user-circle-o fa-3x" style="color:#668ec4"></i>
        <div class="title">注册志愿者数(人)</div>
        <div class="num">{{volunteerNum}}</div>
      </div>
   </div>
    <div class="otherContainer">
      
      <div><div id="allRequestChart" style="width:100%;height:100%"></div></div>
      <div><div id="allRescueChart" style="width:100%;height:100%"></div></div>
   </div>
   <div class="hisTaskContainer">
      <div style="flex: 4 ;">
          <div class="title" style="margin:5px 0">历史任务反馈</div>
          <div class="comment">
             <div class="event" v-for="item in commentData" :key="item.$index">
                <div>类别:{{item.senderType}}——编号:{{item.senderId}}</div>
                <p>时间:{{item.time |formatDateTime}}</p>
                <p>描述:{{item.description}}</p>
             </div>
          </div>
      </div>
      <div style="flex: 7;margin-left: 30px;">
            <div class="title" style="margin:5px 0">历史任务汇总</div>
            <div class="hisTaskTable">
            <el-table
              height="550"
              :data="hisTask"
              border
              style="width: 100%">
              <el-table-column
                prop="taskId"
                label="编号"
                width="100">
              </el-table-column>
              <el-table-column
                prop="taskType"
                label="类型"
                width="100">
              </el-table-column>
              <el-table-column
                prop="taskDescription"
                label="描述">
              </el-table-column>
               <el-table-column
                label="结束时间"
                width="200">
                <template slot-scope="scope">
                   {{scope.row.endTime|formatDateTime}}
                  </template>
              </el-table-column>
               <el-table-column  label="操作"  width="130">
                  <template slot-scope="scope">
                    <el-button
                      type="primary" plain
                      size="small"
                      @click="getComment(scope.$index, scope.row)">查看反馈</el-button>
                  </template>
                </el-table-column>
            </el-table>
            </div>
      </div>
      
      
   </div>
  
  <!-- </div> -->
</div>
</template>
<script>
import "../css/DataList.css"
// import EventCard from "@/components/EventCard.vue"
// import EventTable from "@/components/EventTable.vue"
// import TaskDialog from "@/components/TaskDialog.vue"
import * as echarts from 'echarts';
import axios from 'axios'


export default {
    data() {
        return {
             circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
             commentData:[],
             hisTask:[],
             volunteerNum:null,  //志愿者数量
             rescueNum:null,     //救援队数量
             taskNum:null,       //进行中任务数量
             requestNum:null,     //未审核请求数量
             verifyingRequest:[],  //未审核请求
             verifiedRequest:[],   //进行中的请求
             finishedRequest:[],    //已结束的请求
             barChart:null,
             radarChart:null,
             radarChartData:[0,0,0,0,0],
             barChartData:{"flood":["洪水"],
                           "fire":["火灾"],
                           "outdoor":["户外"],
                           "earthquake":["地震"],
                           "other":["其他"]}
        };
    },
    mounted: function () {
        // this.drawRescueChart()
        window.addEventListener("resize", () => {
        	  this.barChart.resize();
            this.radarChart.resize()
        });
        axios.get('/manager/getAllRegisteredOfficialVolunteerNum').then(res=>{
              this.volunteerNum=res.data
           }).catch(err=>{
             console.log(err)
           })
        axios.get('/manager/getAllRegisteredTeamNum').then(res=>{
             this.rescueNum=res.data
          }).catch(err=>{
            console.log(err)
          }) 
        axios.get('/manager/getTaskDoingNum').then(res=>{
             for(var i in res.data){
              this.taskNum+=res.data[i]
             }
          }).catch(err=>{
            console.log(err)
          })

        axios.get('/manager/getAllRegisteredTeam',).then(res=>{
            res.data.forEach(element => {
              this.radarChartData[0]+=element.flood?1:0
              this.radarChartData[1]+=element.fire?1:0
              this.radarChartData[2]+=element.outdoor?1:0
              this.radarChartData[3]+=element.earthquake?1:0
              this.radarChartData[4]+=element.other?1:0
           });
           this.drawRescueChart()
           console.log("灾情后备力量",this.radarChartData);
        }).catch(err=>{
          console.log(err)
        })

        axios.get('/getUnCheckRequestNums').then(res=>{
                for(var i in res.data){
                 this.barChartData[i].push(res.data[i])
                 this.requestNum+=res.data[i]
                }
                axios.get('/getRequestingNums').then(res=>{
                       for(var i in res.data){
                        this.barChartData[i].push(res.data[i])
                       }
                      //  this.drawChart()
                       axios.get('/getCompletedRequestNums').then(res=>{
                          for(var i in res.data){
                           this.barChartData[i].push(res.data[i])
                          }
                          this.drawChart()
                          }).catch(err=>{
                            console.log(err)
                       })
                    }).catch(err=>{
                      console.log(err)
                    })
                }).catch(err=>{
                  console.log(err)
             })
        
        
        //获取历史任务和第一个任务的反馈
        axios.get('/getCompletedTasks',).then(res=>{
           this.hisTask=res.data
           console.log(this.hisTask);
           if(this.hisTask!=[]){
            //初始获取第一个救援队的反馈
            axios.get('/comment/getComments?taskId='+this.hisTask[0].taskId+'&taskType='+this.hisTask[0].taskType,).then(res=>{
               this.commentData=res.data
               console.log(this.commentData);
               if(this.commentData.length==0){
                  this.$message({
                  message: '该救援任务暂时无反馈',
               });
           }
            }).catch(err=>{
              console.log(err)
            })
           }
        }).catch(err=>{
          console.log(err)
        })
        
    },
    methods: {
       drawRescueChart(){
           this.radarChart = echarts.init(document.getElementById('allRescueChart'));
            // 绘制图表
           this.radarChart.setOption({
              title : {
                text: '救援力量汇总',     //这里的参数是整个图标的标题 后面也可以加注释
                // subtext: '888'
              },
              tooltip : {
                trigger: 'item',
              },
              legend: {
                orient : 'vertical',              //这里主要是标识不同颜色代表不同的同学
                x : 'right',
                y : 'bottom',
                data:['灾情后备力量'],
              },

              toolbox: {
                show : true,
                feature : {
                  // mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  // restore : {show: true},
                  saveAsImage : {show: true},
                },
                top:"10px",
                right:"20px"
              },
              polar : [
                {
                  indicator : [
                    { text: '洪水', max: 6,color:"#222222"},    //这里用于设置各轴的参数以及最大值
                    { text: '火灾', max: 6,color:"#222222"},
                    { text: '户外', max: 6,color:"#222222"},
                    { text: '地震', max: 6,color:"#222222"},
                    { text: '其他', max: 6,color:"#222222"},
                  ]
                }
              ],
              calculable : true,
              series : [
                {
                  // name: '预算 vs 开销（Budget vs spending）',
                  type: 'radar',
                  label: {show: true,position: 'top'},
                  data : [
                    {
                      value : this.radarChartData,
                      name : '灾情后备力量'
                    },
                  ]
                }
              ]
            });
       },
       drawChart(){
          this.barChart= echarts.init(document.getElementById('allRequestChart'));
            // 绘制图表
          this.barChart.setOption({
                  title: {
                  text: '应急请求分布图',
                  subtext: '',    
                  },
                  legend: {
                    // Try 'horizontal'
                    orient: 'horizontal',
                    right: 10,
                    top: '10px',
                    right:'60px'
                  },
                  dataset: {
                    source: [
                      ['product', '未审核', '进行中', '已结束'],
                      this.barChartData["flood"],
                      this.barChartData["fire"],
                      this.barChartData["outdoor"],
                      this.barChartData["earthquake"],
                      this.barChartData["other"]
                    ]
                  },
                  xAxis: { type: 'category' },
                  yAxis: {},
                  series: [{label: {show: true,position: 'top',}, type: 'bar' }, { label: {show: true,position: 'top',},type: 'bar' }, {label: {show: true,position: 'top',}, type: 'bar' }]
                });
            },
       getComment(index,row){
          console.log(index,row);
          axios.get('/comment/getComments?taskId='+row.taskId+'&taskType='+row.taskType,).then(res=>{
           this.commentData=res.data
           console.log(this.commentData);
           if(this.commentData.length==0){
             this.$message({
                message: '该救援任务暂时无反馈',
                });
           }
        }).catch(err=>{
          console.log(err)
        })
       }
    },
    // components: { EventCard:EventCard,EventTable:EventTable,TaskDialog:TaskDialog}
};
</script>



